<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>02广告轮播</title>
		<style type="text/css">
			.adver img{
				width: 20%;
				margin-left: 100px;
			}
			.number li{
				border: 1px solid #E6E6FA;
				float: left;
				list-style-type: none;
				font-size: 40pt;
				margin-left: 73px;
			}
			div li{
				background-color:#E6E6FA;
			}
			div #nub1{
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			var timer = setInterval("lunbo()",3000);
			var i = 1;
			var j = 1;
			var flower = ["","rose","daffodil","apple","daisy"];
			function lunbo(){
				i++;
				if(i>4){
					i=1;
				}			
				//修改img的src属性
				//1.获得img组件/元素
				var imagea = document.getElementById("image");
				//2.修改image的src属性
				imagea.src="../img/轮播图/"+flower[i]+".jpg";
				for(j=1;j<5;j++){//初始化字背景色
					document.getElementById("nub"+j).style.backgroundColor = "#E6E6FA";
				}
				document.getElementById("nub"+i).style.backgroundColor = "red";//改变字背景色
				
			}
			function stop(){
				clearInterval(timer);//清除定时器
			}
			function start(){
				timer = setInterval("lunbo()",3000);
			}
			function chstop1(){
				clearInterval(timer);//清除定时器
				var imagea = document.getElementById("image");
				imagea.src="../img/轮播图/rose.jpg";
				for(j=1;j<5;j++){
					document.getElementById("nub"+j).style.backgroundColor = "#E6E6FA";
				}
				document.getElementById("nub1").style.backgroundColor = "red";
			}
			function chstart1(){
				timer = setInterval("lunbo()",3000);
				i=1;
			}
			function chstop2(){
				clearInterval(timer);//清除定时器
				var imagea = document.getElementById("image");
				imagea.src="../img/轮播图/daffodil.jpg";
				for(j=1;j<5;j++){
					document.getElementById("nub"+j).style.backgroundColor = "#E6E6FA";
				}
				document.getElementById("nub2").style.backgroundColor = "red";
			}
			function chstart2(){
				timer = setInterval("lunbo()",3000);
				i=2;
			}
			function chstop3(){
				clearInterval(timer);//清除定时器
				var imagea = document.getElementById("image");
				imagea.src="../img/轮播图/apple.jpg";
				for(j=1;j<5;j++){
					document.getElementById("nub"+j).style.backgroundColor = "#E6E6FA";
				}
				document.getElementById("nub3").style.backgroundColor = "red";
			}
			function chstart3(){
				timer = setInterval("lunbo()",3000);
				i=3;
			}
			function chstop4(){
				clearInterval(timer);//清除定时器
				var imagea = document.getElementById("image");
				imagea.src="../img/轮播图/daisy.jpg";
				for(j=1;j<5;j++){
					document.getElementById("nub"+j).style.backgroundColor = "#E6E6FA";
				}
				document.getElementById("nub4").style.backgroundColor = "red";
			}
			function chstart4(){
				timer = setInterval("lunbo()",3000);
				i=4;
			}
		</script>
	</head>
	<body>
		<div class="adver">
			<img src="../img/轮播图/rose.jpg" id="image"onmouseover="stop();"onmouseout="start();"/>
		</div>
		<div class="number">
			<ul>
				<li id="nub1"onmouseover="chstop1();"onmouseout="chstart1();">1</li>
				<li id="nub2"onmouseover="chstop2();"onmouseout="chstart2();">2</li>
				<li id="nub3"onmouseover="chstop3();"onmouseout="chstart3();">3</li>
				<li id="nub4"onmouseover="chstop4();"onmouseout="chstart4();">4</li>
			</ul>
		</div>
	</body>
</html>

